<template>
  <div>
    <div class="page-box">
      <div class="box-up">
        <img style="width:100%;" :src="img_bg" alt />
      </div>
      <div class="box-down" :style="down_bg">
        <nut-row type="flex" gutter="10" align="center">
          <nut-col :span="24" style="margin-bottom:0.2rem;">
            <div v-if="!user.vip" class="curr-box">
              <div>
                {{ $t('MemberPage.ndsf') }}:
                <b>{{user.vip?user.vip.name:$t('MemberPage.pthy')}}</b>
              </div>
              <div>{{$t('MemberPage.mrrws')}}: {{user.vip?user.vip.task_cnt:'3'}}</div>
              <span v-if="user.vip">{{$t('MemberPage.yxq')}}: {{user.vip_expire_at?user.vip_expire_at:$t('MemberPage.yj')}}</span>
            </div>
          </nut-col>
        </nut-row>
        <nut-row type="flex" gutter="10" align="center">
          <nut-col :span="24" style="margin-bottom:0.6rem;">
            <van-loading v-if="loading" size="24px">{{ $t('MemberPage.jzz') }}...</van-loading>
            <div v-if="card_list.length>0">
              <ul class="card-list2">
                <li v-if="user.vip" class="card-item2" style="background: #ffe;">
                  <div>
                    <ul>
                      <li :class="user.vip.level == 4?'ask':''" style="width:100%;">
                        <div>{{user.vip.name +'V'+ user.vip_id_level}}</div>
                        <div style="margin:0.3rem 0;">
                          {{ $t('MemberPage.mtkl') }}
                          <b style="color:#fd8d31;">{{user.vip.task_cnt*user.vip_id_level}}</b> {{ $t('MemberPage.crw') }}
                        </div>
                        <div>$t('MemberPage.yxq'): {{user.vip_expire_at?user.vip_expire_at:$t('MemberPage.yj')}}</div>
                      </li>
                      <li style="width:0%;"></li>
                    </ul>
                  </div>
                </li>
                <li
                  :style="{background:card_bg[key]}"
                  :class="item.level == 4?'ask':''"
                  @click="handleClickJoin(item.id,item.money)"
                  :key ='key'
                  v-if="!user.is_vip || (!curr_vip_card_id&&user.vip.level < item.level) ||(curr_vip_card_id&&item.id == curr_vip_card_id)||(!curr_vip_card_id&&item.level==maxlevel)"
                  class="card-item2"
                  v-for="(item, key) in card_list"
                >
                  <div>
                    <ul>
                      <li>
                        <div>
                          {{item.name}}
                          <span class="price">
                            <template v-if="user.is_vip&&(user.vip_id_level<2&&!(user.vip_id_level==1&&user.vip.level==maxlevel))">
                              {{item.money-user.vip.money}}
                              <span class="old-money">{{item.money}}</span>
                            </template>
                            <template v-else>{{item.money}}</template>
                          </span>
                        </div>
                        <div style="margin-top:0.2rem;">
                          {{(curr_vip_card_id&&item.id == curr_vip_card_id)||(!curr_vip_card_id&&item.level==maxlevel)?$t('MemberPage.sjdjmtkyzj'):$t('MemberPage.mtkl')}}
                          <b style="color:#fd8d31;">{{item.task_cnt}}</b> {{ $t('MemberPage.crw') }}
                        </div>
                      </li>
                      <li v-show="item.level != 4">
                        <span v-if="user.is_vip" @click="handleClickJoin(item.id,item.money)">{{ $t('MemberPage.ljsj') }}</span>
                        <span v-else @click="handleClickJoin(item.id,item.money)">{{ $t('MemberPage.ljjr') }}</span>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
              <!--                <ul class="card-list">-->
              <!--                  <li v-if="!user.is_vip || user.vip.level < item.level" class="card-item" v-for="(item, key) in card_list" :style="{'color':item.front_color}">-->
              <!--                    <div class="left">-->
              <!--                      <div><img class="vip-logo" src="/static/img/vip.png" alt=""></div>-->
              <!--                      <div>{{ $t('MemberPage.hydj') }}: {{item.name}}</div>-->
              <!--                      <div v-if="item.desc">{{item.desc}}</div>-->
              <!--                      <div>{{ $t('MemberPage.mrkj') }} <b>{{item.task_cnt}}</b> {{ $t('MemberPage.drw') }}</div>-->
              <!--                      <div class="card-number">-->
              <!--                        <span v-for="item in item.level">⭐️</span>-->
              <!--                      </div>-->
              <!--                    </div>-->
              <!--                    <div class="right">-->
              <!--                    <span class="recharge-money">-->
              <!--                      <template v-if="user.is_vip">-->
              <!--                        <span class="old-money">{{item.money}}</span>-->
              <!--                          {{item.money-user.vip.money}}-->
              <!--                        </template>-->
              <!--                        <template v-else>-->
              <!--                          {{item.money}}-->
              <!--                        </template>-->
              <!--                    </span>-->
              <!--                    <div class="btn-join">-->
              <!--                      <span v-if="user.is_vip" @click="handleClickJoin(item.id,item.money-user.vip.money)">-->
              <!--                          {{ $t('MemberPage.ljsj') }}-->
              <!--                      </span>-->
              <!--                        <span v-else @click="handleClickJoin(item.id,item.money)">-->
              <!--                        {{ $t('MemberPage.ljjr') }}-->
              <!--                      </span>-->
              <!--                    </div>-->
              <!--                    </div>-->
              <!--                  </li>-->
              <!--                </ul>-->
            </div>
          </nut-col>
        </nut-row>
      </div>
      <!--      <nut-actionsheet :is-visible="is_show_join"-->
      <!--                       :menu-items="menuItemsMethod"-->
      <!--                       chooseTagValue="{{ $t('MemberPage.qd') }}"-->
      <!--                       cancelTxt="{{ $t('MemberPage.qx') }}"-->
      <!--                       @choose="handleClickSelectRecharge"-->
      <!--                       @close="handleClickCloseJoin"-->
      <!--      >-->
      <!--        <span slot="title"><label>{{ $t('MemberPage.qxzfkfs') }}</label></span>-->
      <!--      </nut-actionsheet>-->
    </div>
    <MainNav nav_index="1" />
  </div>
</template>

<script>
import Vue from "vue";
import MainNav from "../components/MainNav";
import Notice from "../components/Notice";
import EmptyBox from "../components/EmptyBox";
import { Loading } from "vant";
import "vant/lib/loading/style";

Vue.use(Loading);

export default {
  name: "MemberPage",
  components: {
    MainNav,
    Notice,
    EmptyBox,
    Loading
  },
  data() {
    return {
      user: {},
      card_list: [],
      is_show_join: false,
      menuItemsMethod: [
        {
          name: this.$t('MemberPage.zfb'),
          value: "alipay"
        },
        {
          name: this.$t('MemberPage.wxzc'),
          value: "wechat"
        }
      ],
      select_id: "",
      showPayPage: false,
      showBankPage: false,
      payUrl: "",
      rechargeBank: "",
      currSelectMoney: 0,
      file: "",
      loading: false,
      card_bg: [
        "linear-gradient(#ecc267, #fbe2a1)",
        "linear-gradient(#b8bfda, #dfe5fb)",
        "linear-gradient(#d3b8a6, #ebdbcc)"
      ],
      img_bg: "/static/img/member-bg-min.png",
      img_bg_max: "/static/img/member-bg.png",
      down_bg: {
        background: ""
      },
      curr_vip_card_id: 0,
      maxlevel:0,
    };
  },
  methods: {
    getData() {
      this.loading = true;
      this.$axios
        .get(this.$api_url.vip_cards)
        .then(res => {
          this.card_list = res.data;
          let maxlevel = 0;
          this.max_card = this.card_list.forEach(item => {
            if (item.level > maxlevel) {
              maxlevel = item.level;
            }
          });
          console.log(maxlevel)
          console.log(this.card_list)
          this.maxlevel = maxlevel;
        })
        .catch(err => {
          this.$toast.fail(err.message);
        })
        .then(() => {
          this.loading = false;
        });
    },
    getUser() {
      this.$axios.get(this.$api_url.user).then(res => {
        this.user = res.data;
        if (this.user.vip_id_level > 1) {
          this.curr_vip_card_id = this.user.vip_id;
        }
        console.log(this.curr_vip_card_id)
      });
    },
    uploadIdCard(args) {
      this.file = args.msg[0];
    },
    handleClickJoin(id, money) {
      if (this.user.is_vip&&(this.user.vip_id_level<2&&!(this.user.vip_id_level==1&&this.user.vip.level==this.maxlevel))) {
        money = money - this.user.vip.money;
      }
      let loading = this.$toast.loading();
      let param = new FormData();
      param.append("id", id);
      this.$axios
        .post(this.$api_url.buy_vip, param, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          if (res.data.code === 0) {
            this.$toast.success(res.data.msg);
            this.getUser();
          } else {
            this.$toast.fail(res.data.msg);
            if (res.data.code === -2) {
              location.href = "/#/pay_way?id=" + id + "&money=" + money;
            }
          }
        })
        .catch(err => {
          this.$toast.fail(err.message);
        })
        .then(() => {
          loading.hide();
        });
    },
    handleClickCloseJoin() {
      this.is_show_join = false;
    },
    loadImg() {
      let img = new Image();
      img.src = this.img_bg_max;
      img.onload = () => {
        this.img_bg = this.img_bg_max;
      };
    }
  },
  mounted() {
    this.getData();
    this.getUser();
    //this.loadImg();
    let bg = this.$qs.parse(localStorage.getItem("config_bg"));
    this.img_bg = bg.RechargeBG1;
    this.down_bg.background = "url(" + bg.RechargeBG2 + ") no-repeat";
    this.down_bg["background-size"] = "100% 100%";
    this.down_bg["background-repeat"] = "no-repeat";
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-box {
  padding-bottom: 2.2rem;
  margin-top: 0;
  padding-top: 0;
  font-size: 0.44rem;
  height: 100%;
}
.box-down {
  background: url("/static/img/bg_down.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.2rem 0;
}
.card-item {
  background-color: #ff7c6e;
  color: #fff;
  text-align: left;
  padding: 0.3rem;
  border-radius: 0.4rem;
  cursor: pointer;
  position: relative;
  width: 80%;
  margin: 0.5rem auto;
}
.btn-join {
  position: absolute;
  right: 0.5rem;
  bottom: 0.6rem;
  background: hsla(0, 0%, 100%, 0.75);
  color: black;
  padding: 0.13rem;
  border-radius: 0.1rem;
  font-size: 0.4rem;
}
.curr-box {
  background-color: rgb(254, 250, 216);
  color: orange;
  text-align: left;
  padding: 0.5rem 1rem;
  margin: 0.05rem auto;
  border-radius: 0.5rem;
  width: 90%;
}
.curr-box b {
  text-decoration: underline;
}
.vip-logo {
  height: 2rem;
  width: 2rem;
}
.recharge-money {
  font-size: 1.2rem;
  position: absolute;
  right: 1rem;
  top: 0.6rem;
}
.card-active {
  background-color: rgb(19, 125, 88);
}
.recharge-bank {
  border: thin dashed #ccc;
  padding: 0.6rem;
  border-radius: 0.3rem;
  margin-bottom: 0.4rem;
}
.recharge-bank li {
  margin-bottom: 0.3rem;
}
.recharge-bank li:last-child {
  margin-bottom: 0;
}
.pay-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #ff5a5a;
  color: #fff;
  padding: 0.5rem 0;
}
.pay-qrcode-box {
  text-align: center;
  margin-top: 2rem;
}
.pay-qrcode-box img {
  width: 15rem;
  height: 15rem;
  border-radius: 0.3rem;
  border: thin solid #ccc;
}
.pay-money {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: red;
  margin: 1rem;
}

.card-item .left {
  background: rgba(0, 0, 0, 0.25);
  padding: 0.1rem;
}

.old-money {
  text-decoration: line-through;
  font-size: 0.8rem;
  color: #888;
}

.card-item2 {
  colro: #000;
  padding: 0.5rem 0.3rem;
  width: 90%;
  margin: 0.3rem auto;
  box-shadow: 0 0 0.2rem #999;
}
.card-item2 ul {
  overflow: hidden;
}
.card-item2 ul li {
  float: left;
  text-align: left;
}
.card-item2 ul li:first-child {
  width: 70%;
}
.card-item2 ul li:last-child {
  height: 2rem;
  line-height: 2rem;
  text-align: right;
  width: 30%;
}
.card-item2 .price {
  font-size: 0.7rem;
  font-weight: bold;
}

.ask {
  background: url(../../static/img/long.png) no-repeat;
  background-size: auto 100%;
  background-position: 95%;
}
</style>
